<script setup>
// 导入左侧自定义组件 MyLeft
import MyLeft from "@/components/MyLeft.vue";
// 导入右侧自定义组件 MyRight
import MyRight from "@/components/MyRight.vue";
// 从 vue 中导入 shallowRef，用于创建浅响应式引用
// shallowRef 适合存储组件、DOM元素等非响应式对象，性能优于ref
import {shallowRef} from "vue";

// 创建浅响应式引用 showComponent，用于动态控制渲染的组件
// 初始值设为 MyLeft 组件，页面加载时默认显示 MyLeft
// shallowRef 仅跟踪 .value 的变化，不会深层监听组件内部数据，优化性能
const showComponent = shallowRef(MyLeft);
</script>

<template>
    <!-- 切换按钮1：点击时将 showComponent 设为 MyLeft 组件，触发动态组件切换 -->
    <button @click="showComponent = MyLeft">展示MyLeft组件</button>

    <!-- 切换按钮2：点击时将 showComponent 设为 MyRight 组件，触发动态组件切换 -->
    <button @click="showComponent = MyRight">展示MyRight组件</button>

    <div>
        <!--
            KeepAlive 组件：Vue内置的抽象组件，用于缓存组件实例
            - 被包裹的组件切换隐藏时不会被销毁，而是进入缓存状态
            - include="MyLeft"：仅缓存名称为"MyLeft"的组件（需在MyLeft组件中通过name选项定义）
            - 不满足include条件的组件（如MyRight）切换时会正常销毁/重建
        -->
        <!--
                动态组件：根据 :is 绑定的值渲染对应的组件
                - :is="showComponent"：绑定响应式变量，值为要渲染的组件（MyLeft/MyRight）
                - 当 showComponent 变化时，会自动切换渲染的组件
            -->
        <KeepAlive include="MyLeft">
            <component :is="showComponent"></component>
        </KeepAlive>
    </div>
</template>

<style scoped>
/* 局部样式区域，当前无需额外样式 */
</style>